import React, { Component } from 'react'
// 受控组件
//    state作为唯一的数据源，配合 value值使用
//    配置onChange事件修改状态，状态的改变引起视图的二次渲染
export default class App extends Component {
  state = {
    username: '吴大勋',
    note: '',
    lesson: ''
  }
  changeHandler = (event) => {
    this.setState({
      username: event.target.value
    })
  }
  noteChange = (event) => {
    this.setState({
      note: event.target.value
    })
  }
  selectHandler = (e) => {
    this.setState({
      lesson: e.target.value
    })
  }
  getLesson = (index) => {
    return index === '1' ? '一阶段' : index === '2' ? '二阶段' : index === '3' ? '三阶段' : ''  }
  render() {
    return (
      <div>
        <input type="text" value={ this.state.username } onChange = { this.changeHandler }/>
        <textarea onChange = { this.noteChange } value= { this.state.note } placeholder="备注"></textarea>
        { this.state.username }
        <select value = { this.state.lesson } onChange = { this.selectHandler }>
          <option disabled value="">请选择</option>
          <option value="1">1阶段</option>
          <option value="2">2阶段</option>
          <option value="3">3阶段</option>
        </select> { this.getLesson(this.state.lesson) }
      </div>
    )
  }
}
